<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>账号管理</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		.top_main_wraper {
			padding:0 0.75rem;
			padding-bottom: 0;
			border-bottom: 0.55rem solid #F6F6F6;
		}

		.top_main_wraper>div {
			height:2.75rem;
			background: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid rgba(238,238,238,0.5);
		}
		.phone{
			display: flex;
			align-items: center;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="ming-bg-white">
			<!-- 上方手机号 登录密码 -->
			<div class="top_main_wraper">
				<div class="" tapmode onclick="open_change_phone()">
					<div class="" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);">
						手机号
					</div>
					<div class="phone ">
						<!-- {{format_tel(info.mobile)}} -->
						<span style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">{{info.mobile}}</span>
						<img src="../../image/icon/right_turn_new.png" alt="" style="width:0.5rem;height:1rem;margin-left:0.25rem;">
					</div>
				</div>

				<div class="" tapmode onclick="open_win('edit_pwd','../login/edit_pwd.html')">
					<div class="" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);">
						登录密码
					</div>
					<div class="phone ">
						<span style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">修改</span>
						<img src="../../image/icon/right_turn_new.png" alt="" style="width:0.5rem;height:1rem;margin-left:0.25rem;">
					</div>
				</div>

			</div>

			<div class="top_main_wraper">
				<div class="" tapmode onclick="next_bind('wx')">
					<div class="" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);">
						微信
					</div>
					<div class="phone ">
						<span v-if="info.wx_openid==''" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">未绑定</span>
						<span v-else style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">解绑</span>
						<img src="../../image/icon/right_turn_new.png" alt="" style="width:0.5rem;height:1rem;margin-left:0.25rem;">
					</div>
				</div>

				<div class="" tapmode onclick="next_bind('qq')">
					<div class="" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);">
						QQ
					</div>
					<div class="phone ">
						<span v-if="info.qq_openid==''" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">未绑定</span>
						<span v-else style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">解绑</span>
						<img src="../../image/icon/right_turn_new.png" alt="" style="width:0.5rem;height:1rem;margin-left:0.25rem;">
					</div>
				</div>

				<div class="" tapmode onclick="next_bind('sina')">
					<div class="" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);">
						新浪微博
					</div>
					<div class="phone ">
						<span v-if="info.sina_openid==''" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">未绑定</span>
						<span v-else style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">解绑</span>
						<img src="../../image/icon/right_turn_new.png" alt="" style="width:0.5rem;height:1rem;margin-left:0.25rem;">
					</div>
				</div>

				<!-- <div class="" tapmode onclick="next_bind('alipay')">
					<div class="" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);">
						支付宝
					</div>
					<div class="phone ">
						<span v-if="info.alipay_openid==''" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">未绑定</span>
						<span v-else="" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">解绑</span>
						<img src="../../image/icon/right_turn_new.png" alt="" style="width:0.5rem;height:1rem;margin-left:0.25rem;">
					</div>
				</div> -->

			</div>
		</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			info: {}
		},
		methods: {
			format_tel: function(tel) {
				var reg = /1(\d{2})\d{4}(\d{4})/g;
				str = tel.replace(reg, "1$1****$2");
				return str;
			},
			get_userinfo: function() {
				get_data('api/user/getUserInfo', {
					token: $api.getStorage('token')
				}, function(ret) {
					if (ret.status) {
						save_userinfo_new(ret)
						vm.info = ret.data
					}
				}, false)
			}
		}
	})
	apiready = function() {
		vm.get_userinfo()
		add_event('mobile_change', function(ret) {
			vm.get_userinfo()
			setTimeout(function() {
				close_win()
			}, 1000)
		})
	}

  function open_change_phone(){
		open_win('change_phone','../login/change_phone.html')
	}
	function next_bind(type) {
		if (type == 'qq') {
			if (vm.info.qq_openid == '') {
				login_q()
			} else {
				$api.setStorage('jiechuinfo', {
					flag: 'qq'
				})
				open_win('bind_jiechu', '../login/bind_jiechu.html')
			}
		}
		if (type == 'wx') {
			if (vm.info.wx_openid == '') {
				login_w()
			} else {
				$api.setStorage('jiechuinfo', {
					flag: 'wx',
					wx_username: vm.info.wx_username
				})
				open_win('bind_jiechu', '../login/bind_jiechu.html')
			}
		}
		if (type == 'sina') {
			if (vm.info.sina_openid == '') {
				login_sina()
			} else {
				$api.setStorage('jiechuinfo', {
					flag: 'sina'
				})
				open_win('bind_jiechu', '../login/bind_jiechu.html')
			}
		}
		if(type == 'alipay'){

		}
	}

	function login_q() {
		login_qq(function(ret) {
			var qq = api.require('QQPlus');
			var openid = ret.openId;
			qq.getUserInfo(function(ret, err) {
				if (ret.status) {
					var info = ret.info
					login_bind(openid, 'qq', info.nickname)
				} else {}
			});
		}, function(error) {})
	}

	function login_w() {
		login_wechat(function(ret) {
			var wx = api.require('wxPlus');
			var openid = ret.openId;
			wx.getUserInfo({
				accessToken: ret.accessToken,
				openId: openid
			}, function(ret, err) {
				if (ret.status) {
					login_bind(openid, 'wx', ret.nickname)
						//						alert(JSON.stringify(ret));
				} else {
					alert(err.code);
				}
			});
		}, function(error) {
			console.log(JSON.stringify(error))
		})
	}

	function login_sina() {
		login_wb(function(ret) {
			var openid = ret.userId;
			var token = ret.token;
			login_bind(openid, 'sina', openid)
		}, function(error) {
			// alert(JSON.stringify(error))
		})
	}

	function login_bind(openId, flag, name) {
		get_data('api/login/quickBindUser', {
			token: $api.getStorage('token'),
			openid: openId,
			third_username: name,
			flag: flag
		}, function(ret) {
			if (ret.status) {
				toast('绑定成功')
				vm.get_userinfo()
			} else {
				toast(ret.msg)
			}
		})
	}
</script>

</html>
